{extend name="public/layout"/}
{block name="title"}{$info.title}{/block}
{block name="head"}
<style>
  iframe {border:0;}
  .vr-close{position:absolute;width:30px;height:30px;text-align:center;line-height:30px;border-radius:50%;background:rgba(0,0,0,0.8);color:#fff;font-size:18px;right:10px;top:80px;z-index:9;}
  .case-thumb{padding:10px;position:relative}
  .case-thumb .vr-btn{display:block;width:60px;height:60px;text-align:center;line-height:60px;border-radius:50%;background:rgba(0,0,0,0.8);color:#fff;font-size:32px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
</style>
{/block}
{block name="body"}
<section class="mc-view-box">
  {include file="public/index_header" /}
  <div class="mc-scrollview">
    <div class="case-thumb">
      <a href="javascript:;" onclick="vrShow()" class="iconfont icon-VR vr-btn"></a>
      <img src="{$info.thumb}" class="mc-img-responsive" alt="">
    </div>
    <div class="p-d p-tb-clear">
      <h2 class="font-size18 font-weight500 line-height24">{$info.title}</h2>
      <div class="height-5"></div>
      <div class="font-size12 line-height18 font-gray">{$info.desc}</div>
      <div class="height-5"></div>
      <div class="split-line-solid"></div>
      {notempty name="info.product_ids"}
      <div class="font-size14 line-height30">相关产品</div>
      <div class="cell-row">
          <ul class="mc-avg-sm-4  mc-avg-between img-square-list">
            {volist name="$info.product_list" id="vo" offset="" length=''}
            <li>
              <a href="javascript:;" class="img-item">
                <div class="item-thumb" style="background-image:url({$vo.thumb})"></div>
                <div class="item-title">{$vo.title}</div>
              </a>
            </li>
            {/volist}
          </ul>
      </div>
      {/notempty}
      <div class="p-d text-center">
        <img src="/home/index/qrcode.html?text={$info.jump}" style="width:120px;" alt="">
        <div class="font-size12 line-height30 font-gray">
          长按识别二维码，体验VR
        </div>
      </div>
    </div>
  </div>
  {include file="public/index_footer" /}
</section>
<div id="full-vr" class='weui-popup__container  popup-right'>
  <div class="weui-popup__overlay"></div>
  <div class="weui-popup__modal bg-white">
    <a href="javascript:;" onclick="closeVr()" class="iconfont icon-guanbi vr-close"></a>
    <div id="vr-box"></div>
  </div>
</div>
{/block}
{block name="script"}
<script>
  function vrShow() {
    var vr_url = "{$info.jump}";
    html = '<div class="mc-scrollview" style=" background:#fff ;">\n' +
        '<iframe src="'+vr_url+'" allow="microphone;camera" border="0" frameborder="0" scrolling="no" width="100%" height="'+document.body.clientHeight+'"></iframe>\n' +
        '</div>';
    $('#vr-box').html(html);
    $('#full-vr').popup();
  }
  function closeVr() {
    $('#vr-box').empty();
    $.closePopup();
  }
</script>
{/block}